<!--
 *Author：jxx
 *Contact：283591387@qq.com
 *业务请在@/extension/equipment/equipment_ledger/equipment_ledger.jsx或equipment_ledger.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://v3.volcore.xyz/docs/view-grid、https://v3.volcore.xyz/docs/web
 -->
<template>
    <view-grid ref="grid"
               :columns="columns"
               :detail="detail"
               :details="details"
               :editFormFields="editFormFields"
               :editFormOptions="editFormOptions"
               :searchFormFields="searchFormFields"
               :searchFormOptions="searchFormOptions"
               :table="table"
               :extend="extend"
               :onInit="onInit"
               :onInited="onInited"
               :searchBefore="searchBefore"
               :searchAfter="searchAfter"
               :addBefore="addBefore"
               :updateBefore="updateBefore"
               :rowClick="rowClick"
               :modelOpenBefore="modelOpenBefore"
               :modelOpenAfter="modelOpenAfter">
        <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
        <template #gridHeader>
            
        </template>
      

    </view-grid>
     <!--将select-custom这段代码放在view-grid标签后面 -->
  <!-- 弹出框(选择数据) -->
  <select-custom ref="customRef" @onSelectCustom="onSelectCustom"></select-custom>
</template>
<script setup lang="jsx">
    import extend from "@/extension/equipment/equipment_ledger/equipment_ledger.jsx";
       const customRef = ref(null);
    import viewOptions from './equipment_ledger/options.js'
    import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
    const grid = ref(null);
    const { proxy } = getCurrentInstance()
    //http请求，proxy.http.post/get
    const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
    import SelectCustom from '@/views/equipment/equipment_ledger/equipment_ledgerselect.vue'
import { color } from "echarts";
import router from "@/router/index.js";
    let gridRef;//对应[表.jsx]文件中this.使用方式一样
    //生成对象属性初始化
    const onInit = async ($vm) => {
        gridRef = $vm;
        //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
        //更多属性见：https://v3.volcore.xyz/docs/view-grid
        gridRef.columnIndex=true;
        conInited();
        const option = gridRef.getFormOption("person_in_charge");
  option.readonly = true;
  option.extra = {
    icon: 'el-icon-zoom-out', //显示图标
    text: '选择', //显示文本
    style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
    //触发事件
    click: (item) => {
      customRef.value.open();
    }
  };
    }
 
//选择客户回调
const onSelectCustom = (rows) => {
    editFormFields.person_in_charge=''
    rows.forEach(item=>{
        if(editFormFields.person_in_charge!='')
        {
            editFormFields.person_in_charge+=','            
        }
        editFormFields.person_in_charge+=item.UserTrueName
    })
   //editFormFields.person_in_charge+=rows[0].UserTrueName+',';
   //这里还可以给其他字段设置值editFormFields.字段=
}
    const conInited = () => {
  columns.forEach((column) => {
        //修改颜色
        if (column.field == 'code') {
            column.formatter = (row) => {
                return '<span link  style="color: #2d8cf0;cursor: pointer;">' + row.code + '</span>'
            }
        //单元格绑定事件,如果需要多个按钮或者点击事件，见上面自定义按钮示例
        column.click = (row, column, event) => {
           
        proxy.$tabs.open({
            text: '设备台账详情',
            path: '/equipment_ledger_details',
            query: {row:JSON.stringify(row)}//参数名
        });
        };
        }
       
       
          
        }
  );}
    //生成对象属性初始化后,操作明细表配置用到
    const onInited = async () => {
        
    }
    const searchBefore = async (param) => {
        //界面查询前,可以给param.wheres添加查询参数
        //返回false，则不会执行查询
        return true;
    }
    const searchAfter = async (rows, result) => {
        return true;
    }
    const addBefore = async (formData) => {
        //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
        return true;
    }
    const updateBefore = async (formData) => {
        //编辑保存前formData为对象，包括明细表、删除行的Id
        return true;
    }
    const rowClick = ({ row, column, event }) => {
        //查询界面点击行事件
        // grid.value.toggleRowSelection(row); //单击行时选中当前行;
    }
    const modelOpenBefore = async (row) => {//弹出框打开后方法
        return true;//返回false，不会打开弹出框
    }
    const modelOpenAfter = (row) => {
        //弹出框打开后方法,设置表单默认值,按钮操作等
    }
    //监听表单输入，做实时计算
    //watch(() => editFormFields.字段,(newValue, oldValue) => {	})
    //对外暴露数据
    defineExpose({})






</script>
<style lang="less" scope>
</style>
